import React from 'react'
import { Carousel, Button } from 'antd';
import HomeHttp from '../apis/home'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import '../style/banner.scss'
export default function Banner() {
    const [banner, setbanner] = React.useState([])
    React.useEffect(() => {
        getMsg()
    }, [])
    const getMsg =()=>{
       // 轮播图
    let swiper = HomeHttp.swiper().then(res=>setbanner([...res.banners]))
    console.log('轮播图',swiper);
    }
    const handlePrev = () => {
        // 调用 Carousel 组件的 prev() 方法来切换到上一页
        carouselRef.current.prev();
    };
    const handleNext = () => {
        // 调用 Carousel 组件的 next() 方法来切换到下一页
        carouselRef.current.next();
    };
    // 创建一个 ref 来引用 Carousel 组件
    const carouselRef = React.useRef();
    
    const [currentIndex, setCurrentIndex] = React.useState(0); // 当前 Carousel 下标
    return (
        <div className='imgBG' style={{
            height: '285px', 
            backgroundColor: 'green', paddingLeft: '297px',
            backgroundImage: `url(${banner[currentIndex]?.imageUrl})`,
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
        }}>
            <Carousel ref={carouselRef} autoplay effect="fade"
            beforeChange={( prevIndex,nextIndex) => {
                setCurrentIndex(nextIndex); // 更新当前 Carousel 下标
              }}>
                {
                    banner.map(item => {
                        return (
                            <div key={item.imageUrl} >
                                <img src={item.imageUrl} alt="" style={{ height: '285px', width: '61.5%' }} />
                            </div>
                        )
                    })
                }

            </Carousel>
            <div className='left-right'>
                <Button type="text" onClick={handlePrev}><LeftOutlined /></Button>
                <Button type="text" onClick={handleNext}><RightOutlined /></Button>
            </div>
        </div>
    )
}
